<!-- 
	使用方式：
	publicStyle： 按钮的公共样式
	btnNum： 每个按钮的私有样式
	trigger： 触发的方法
	<ct-button :btnNum="btnNum"　:publicStyle="publicStyle" :disabled="disabled" :size="size" @trigger="trigger"></ct-button>
 -->


<template>
	<view class="container">
		<view class="l-fjb" v-if="bfStyle">
			<button v-for="(item, index) in bfStyle.btns" :key="index" :style="[bfStyle, bfStyle.btns[index]]" class="l-f1 o-mlr" type="default" :size="size" :disabled="disabled" @click="trigger(index)">{{bfStyle.btns[index].name}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:'',
		data() {
			return{}
		},
		props:{
			size:{
				type: String,
				default: 'default'
			},
			disabled:{
				type: Boolean,
				default: false
			},
			// btn的公共样式
			publicStyle: {
				type:Object,
				default:function() {
					return {}
				}
			},
			//不传，默认是一个按钮
			btnNum: {
				type:Array,
				default:function() {
					return []
				}
			}
		},
		computed:{
			bfStyle: function() {
				let opt = {
					'border': 'none',
					'color': '#ffffff',
					'line-height': '90rpx',
					'font-size': '32rpx',
					'border-radius': '100rpx',
					'btns': [{
						'name': '提交',
						'background': 'rgb(86, 126, 251)',
					}]
				}
				opt = {...opt,...this.publicStyle}
				opt.btns = opt.btns.concat(this.btnNum)
				return opt
			}
		},
		watch:{},
		onLoad() {
			
		},
		methods:{
			// 触发按钮
			trigger(e) {
				this.$emit('trigger', e)
			}
		}
	}
</script>

<style>
	.g{
		/* inherit(继承)； initial(最初的)*/
		
	}
	button::after{
		border: none;
	}
</style>
